<template>
  <!-- 登记库 -->
  <div class="container">
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <el-form :inline="true" :model="boxQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="盒号/盒名">
          <el-input v-model="boxQueryParam.boxNoOrName" placeholder="请输入盒号或盒名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="boxOnSubmit">查询</el-button>
          <el-button @click="boxRest">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <el-form :inline="true" :model="archiveQueryParam" class="demo-form-inline" size="medium">
        <el-form-item label="档号/题名">
          <el-input v-model="archiveQueryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="archiveOnSubmit">查询</el-button>
          <el-button @click="archiveRest">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="盒登记" name="box">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="boxTableData" border style="width: 100%" height="55vh">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column v-for="item of boxTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
              <template #default="scope">
                <span v-if="item.prop === 'handleFlag'">
                  <el-tag v-if="scope.row.handleFlag == 1" type="success">已处理</el-tag>
                  <el-tag v-if="scope.row.handleFlag == 0" type="danger">未处理</el-tag>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="150">
              <template slot-scope="{ row }">
                <el-button v-if="row.handleFlag === 0" link size="mini" @click="handle(row, 'box')">处理</el-button>
                <el-button v-if="row.handleFlag === 1" link size="mini" @click="handleRes(row)">处理结果</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="档案登记" name="archive">
        <el-card class="box-card" :body-style="{ padding: 10 }">
          <el-table :data="archiveTableData" border style="width: 100%" height="55vh">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column v-for="item of archiveTableProps" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
              <template #default="scope">
                <div v-if="item.prop === 'handleFlag'">
                  <el-tag v-show="scope.row.handleFlag == 1" type="success">已处理</el-tag>
                  <el-tag v-show="scope.row.handleFlag == 0" type="danger">未处理</el-tag>
                </div>
                <div v-else>{{ scope.row[item.prop] }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="150">
              <template slot-scope="{ row }">
                <el-button v-if="row.handleFlag === 0" link size="mini" @click="handle(row, 'archive')">处理</el-button>
                <el-button v-if="row.handleFlag === 1" link size="mini" @click="handleRes(row)">处理结果</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-if="activeName == 'box'">
      <pagination ref="pagination" :totalCount="boxTotalCount" @pagination="boxPagination"></pagination>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }" v-else>
      <pagination ref="pagination" :totalCount="archiveTotalCount" @pagination="archivePagination"></pagination>
    </el-card>
  </div>
</template>

<script>
import { pageList, handle, getHandleResult } from '@/api/rfid/recordBill'
export default {
  name: 'recordLibrary',
  data() {
    return {
      activeName: 'box',
      boxTotalCount: 0,
      //查询条件
      boxSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      boxQueryParam: {
        labelType: 1,
      },
      boxTableData: [],
      boxTableProps: [
        { title: '盒号', prop: 'boxNo', width: '', checked: true },
        { title: '盒名', prop: 'boxName', width: '', checked: true },
        { title: '登记类型', prop: 'exceptionType_dictText', width: '', checked: true },
        { title: '登记时间', prop: 'registerDate', width: '', checked: true },
        { title: '是否已处理', prop: 'handleFlag', width: '', checked: true },
      ],
      // ============
      archiveTotalCount: 0,
      //查询条件
      archiveSearchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      archiveQueryParam: {
        labelType: 0,
      },
      archiveTableData: [],
      archiveTableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: '登记类型', prop: 'exceptionType_dictText', width: '', checked: true },
        { title: '登记时间', prop: 'registerDate', width: '', checked: true },
        { title: '是否已处理', prop: 'handleFlag', width: '', checked: true },
      ],
    }
  },
  mounted() {
    this.boxLoadData()
    this.archiveLoadData()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'archive') {
        this.archiveTableData = []
        this.archiveLoadData()
      } else if (tab.name === 'box') {
        this.boxTableData = []
        this.boxLoadData()
      }
    },
    // ===================================档案盒===================================
    boxOnSubmit() {
      this.$refs.boxpagination.resetPagination()
    },
    boxRest() {
      this.boxQueryParam = {
        labelType: 1,
      }
      this.$refs.boxpagination.resetPagination()
    },
    boxLoadData() {
      var param = Object.assign(this.boxQueryParam, this.boxSearchModel)
      pageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.boxTableData = res.data.data.records
            this.boxTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    boxPagination(val) {
      this.boxSearchModel.pageNo = val.page
      this.boxSearchModel.pageSize = val.limit
      this.boxLoadData()
    },
    // ===================================档案===================================
    archiveOnSubmit() {
      this.$refs.archivepagination.resetPagination()
    },
    archiveRest() {
      this.archiveQueryParam = {
        labelType: 0,
      }
      this.$refs.archivepagination.resetPagination()
    },
    archiveLoadData() {
      var param = Object.assign(this.archiveQueryParam, this.archiveSearchModel)
      pageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.archiveTableData = res.data.data.records
            this.archiveTotalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    archivePagination(val) {
      this.archiveSearchModel.pageNo = val.page
      this.archiveSearchModel.pageSize = val.limit
      this.archiveLoadData()
    },
    handle(row, type) {
      this.$prompt('请输入处理结果', '处理', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          const data = {
            detailsId: row.detailsId,
            handleResult: value,
          }
          handle(data).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('处理成功')
              if (type === 'box') {
                this.boxLoadData()
              } else if (type === 'archive') {
                this.archiveLoadData()
              }
            } else {
              this.$message.warning(res.data.message)
            }
          })
        })
        .catch((error) => {
          if (error === 'cancel') {
            // 用户点击了取消按钮，可以在此处添加相应处理逻辑
          } else {
            // 其他错误情况，例如网络错误等
            this.$message.error(error)
          }
        })
    },
    handleRes(row) {
      getHandleResult(row.detailsId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$alert(res.data.data.handleResult || '无', '处理结果', {
              showConfirmButton: false,
              showCancelButton: true,
              cancelButtonText: '关闭',
              callback: (action) => { },
            })
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/tabs.less';

.el-form-item {
  margin-bottom: 0 !important;
}

.el-tabs__item {
  height: 50%;
}

.el-tabs__header {
  height: 60vh !important;
}
</style>
